<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>

    <!-- Le styles -->
    <link href="/css/bootstrap.css" rel="stylesheet"/>
    <style type="text/css">
        body {
            padding-top: 60px;
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }
    </style>
    <link href="/css/bootstrap-responsive.css" rel="stylesheet"/>

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="/js/html5shiv.js"></script>
    <![endif]-->

    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/ico/apple-touch-icon-144-precomposed.png"/>
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/ico/apple-touch-icon-114-precomposed.png"/>
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/ico/apple-touch-icon-72-precomposed.png"/>
    <link rel="apple-touch-icon-precomposed" href="/ico/apple-touch-icon-57-precomposed.png"/>
    <link rel="shortcut icon" href="/ico/favicon.png"/>
</head>

<body>

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container-fluid">
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="brand" href="#">Project name</a>
            <div class="nav-collapse collapse">
                <p class="navbar-text pull-right">
                    Logged in as <a href="#" class="navbar-link">Username</a>
                </p>
                <ul class="nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span3">
            <div class="well sidebar-nav">
                <ul class="nav nav-list">
                    <li class="nav-header">Sidebar</li>
                    <li class="active"><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li class="nav-header">Sidebar</li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li class="nav-header">Sidebar</li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul>
            </div><!--/.well -->
        </div><!--/span-->
        <div class="span9">
            <span>培训管理/培训人员追加</span><br/><br/>
            <form name="form" action="/train/member/search" method="post">
                <span>部门：&nbsp;&nbsp;&nbsp;</span>
                <select id="departmentName" name="departmentName">
                    <option>GBU-STSol-LH</option>
                    <option>GBU-STSol-BR</option>
                    <option>GBU-STSol-NKRM</option>
                    <option>GBU-STSol-TJR</option>
                    <option>GBU-STSol-CARADA</option>
                    <option>GBU-STSol-IBSS</option>
                    <option>GBU-STSol-IPMC</option>
                    <option>GBU-STSol-ZHSG</option>
                    <option>GBU-STSol-ePas</option>
                    <option>GBU-STSol-EOS</option>
                    <option>GBU-STSol-ePas.1</option>
                    <option>GBU-STSol-BRSF1</option>
                    <option>GBU-STSol-EOS.1</option>
                </select><br/><br/>
                <span>未参加授课类型：&nbsp;</span>
                <select id="trainTypeName" name="trainTypeName">
                    <option>新员工培训</option>
                    <option>日语技能</option>
                    <option>管理学初级</option>
                    <option>管理学高级</option>
                    <option>过程体系</option>
                    <option>设计技能</option>
                    <option>编程技能</option>
                    <option>测试技能</option>
                    <option>技术专题</option>
                    <option>其他</option>
                </select><br/>
                <button type="submit" class="btn btn-primary">检索</button>
            </form>
            <div th:if="${not #lists.isEmpty(trainMemberMap)}">
                <table class="table table-condensed">
                    <tr>
                        <th>#</th>
                        <th>姓名</th>
                        <th>部门</th>
                        <th>职务</th>
                    </tr>
                    <tr th:each="memMap : ${trainMemberMap}">
                        <td><div class="checkbox">
                            <label>
                                <input type="checkbox" name="checkbox" id="blankCheckbox" th:id="${memMap.key}" value="option1" aria-label="Checkbox without label text"/>
                            </label>
                        </div></td>
                        <td th:text="${memMap.value[0]}">姓名</td>
                        <td th:text="${memMap.value[1]}">部门</td>
                        <td th:text="${memMap.value[2]}">职务</td>
                    </tr>
                </table>
                <button type="submit" class="btn btn-primary" onclick="turnTargetObject()">目标对象</button>&nbsp;
                <button type="submit" class="btn btn-primary" onclick="turnConfirmObject()">确定对象</button>&nbsp;
                <button type="button" class="btn" onclick="location.href = '/trainmemberdetails'">返回</button>
            </div>
        </div><!--/span-->
    </div><!--/row-->

    <hr/>

    <footer>
        <p>&copy; Company 2020</p>
    </footer>

</div><!--/.fluid-container-->

<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap-transition.js"></script>
<script src="/js/bootstrap-alert.js"></script>
<script src="/js/bootstrap-modal.js"></script>
<script src="/js/bootstrap-dropdown.js"></script>
<script src="/js/bootstrap-scrollspy.js"></script>
<script src="/js/bootstrap-tab.js"></script>
<script src="/js/bootstrap-tooltip.js"></script>
<script src="/js/bootstrap-popover.js"></script>
<script src="/js/bootstrap-button.js"></script>
<script src="/js/bootstrap-collapse.js"></script>
<script src="/js/bootstrap-carousel.js"></script>
<script src="/js/bootstrap-typeahead.js"></script>


<script type="text/javascript">
    function turnTargetObject() {
        $('input[name="checkbox"]:checked').each(function(){
            var trainStudents = this.id;
            $.post('/turn/targetObject',{'trainStudents':trainStudents},function (data) {},'json');
            $(this).parent().parent().parent().parent().remove();//移除当前行 checkbox的父级是td，td的父级是tr，然后删除tr。就ok了。用each，选择多行遍历删除
        });
    }

    function turnConfirmObject() {
        $('input[name="checkbox"]:checked').each(function(){
            var trainStudents = this.id;
            $.post('/turn/confirmObject',{'trainStudents':trainStudents},function (data) {},'json');
            $(this).parent().parent().parent().parent().remove();//移除当前行 checkbox的父级是td，td的父级是tr，然后删除tr。就ok了。用each，选择多行遍历删除
        });
    }
</script>
</body>
</html>